<template>
  <div class="data-analysis">
    <!-- 数据分析 -->
    <!-- 左 -->
    <div class="com-left panel3">
      <h2>地图统计</h2>
      <div class="map-box">
        <div class="icon-box">
          <!-- 1 -->
          <div class="icon">
            <div class="img"><img src="../../assets/DataAnalysis/01.png" alt="" /></div>
            <div class="text">
              <div class="sizi">用户接入指标</div>
              <div class="num">365户</div>
            </div>
          </div>
          <!-- 2 -->
          <div class="icon">
            <div class="img"><img src="../../assets/DataAnalysis/02.png" alt="" /></div>
            <div class="text">
              <div class="sizi">用户接入数</div>
              <div class="num">365户</div>
            </div>
          </div>
          <!-- 3 -->
          <div class="icon">
            <div class="img"><img src="../../assets/DataAnalysis/03.png" alt="" /></div>
            <div class="text">
              <div class="sizi">覆盖率</div>
              <div class="num">65%</div>
            </div>
          </div>
          <!-- 4 -->
          <div class="icon">
            <div class="img"><img src="../../assets/DataAnalysis/04.png" alt="" /></div>
            <div class="text">
              <div class="sizi">用户接入指标</div>
              <div class="num">365户</div>
            </div>
          </div>
        </div>

        <div class="map">
          <mapJiangSu />
        </div>
      </div>

      <div class="panel-footer" />
    </div>
    <!--右  -->
    <div class="com-right">
      <div class="heade">
        <div class="line panel3">
          <h2>数据接入完整性走向</h2>
          <div class="chart-line">
            <lineChart />
          </div>
          <div class="panel-footer" />
        </div>
        <div class="pie panel3">
          <h2>能源类型分析</h2>
          <div class="chart-line">
            <pieChart />
          </div>
          <div class="panel-footer" />
        </div>
      </div>
      <div class="stati panel3">
        <h2>行业统计</h2>
        <div class="chart-line">
          <lineChart2 />
        </div>
        <div class="panel-footer" />
      </div>
    </div>
  </div>
</template>

<script>
import lineChart from './components/lineChart.vue'
import pieChart from './components/pieChart.vue'
import lineChart2 from './components/lineChart2.vue'
import mapJiangSu from './components/mapJiangSu.vue'
export default {
  name: 'DataAnalysis',
  components: {
    lineChart,
    // eslint-disable-next-line vue/no-unused-components
    pieChart,
    // eslint-disable-next-line vue/no-unused-components
    lineChart2,
    // eslint-disable-next-line vue/no-unused-components
    mapJiangSu
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './dataAnalysis.scss';
</style>
